/**
 * @description 样式三，目前只适合新闻？
 */
import AbIcon from "@/components/DecorateIcons/Ab_Icon"
import GoodImg from '@/assets/img/good.jpeg'
import React, { useEffect, useState } from "react"

function GoodList3({ base }) {
  let { leftLimit = 2, rightLimit = 4 } = base
  const [data, setData] = useState(getData(leftLimit, rightLimit))
  const [actId, setActId] = useState(null)

  useEffect(() => {
    let data = getData(leftLimit, rightLimit)
    setData(data)
    setActId(data.right[0]?.id)
  }, [leftLimit, rightLimit])

  return (
    <div className="good-list-3">

      {/* 左侧图文列表 */}
      <div className="left">
        {
          data.left.map(item => (
            <div className="item" key={item.id}>

              <div className="img-box">
                <img src={GoodImg} alt="" draggable="false" />
              </div>

              <div className="info-box">
                {/* 标题 */}
                <div className="name">{item.title}</div>

                {/* 价格 */}
                <div className="price">￥ {item.price}</div>

                {/* 时间 */}
                <div className='time' >{item.addtime}</div>

                {/* 描述 */}
                <div className="desc" dangerouslySetInnerHTML={{ __html: item.desc }}></div>


              </div>
            </div>
          ))
        }


      </div>

      {/* 右侧文字列表 */}
      <div className="right">
        {
          data.right.map(item => (
            <div className={`item ${item.id == actId ? 'active' : ''}`} key={item.id}>

              {/* 标题 */}
              <div className="name" onClick={() => setActId(item.id)}>
                {item.title}
                <AbIcon className='icon' iconName={item.id == actId ? 'MinusOutlined' : 'PlusOutlined'}></AbIcon>
              </div>

              {/* 描述 */}
              <div className="desc-box">
                <div className="desc" dangerouslySetInnerHTML={{ __html: item.desc }}></div>
              </div>

            </div>
          ))
        }
      </div>


    </div>
  )
}


// 获取分类数据
function getData(leftLimit, rightLimit) {

  let data = {
    left: [],
    right: []
  }

  let totalLimit = leftLimit + rightLimit

  for (let index = 0; index < totalLimit; index++) {
    let _index = index + 1

    let item = {
      id: index,
      title: `新闻${_index}`,
      price: '99',
      img: GoodImg,
      addtime: '2024-11-4 10:20:21',
      desc: "这是新闻的简介,这是新闻的简介这是新闻的简介这是新闻的简介，这是新闻的简介，这是新闻的简介这是新闻的简介这是新闻的简介这是新闻的简介，这是新闻的简介这是新闻的简介这是新闻的简介，这是新闻的简介这是新闻的简介这是新闻的简介，这是新闻的简介这是新闻的简介这是新闻的简介。"
    }
    index < leftLimit ? data.left.push(item) : data.right.push(item)

  }

  return data
}

export default React.memo(GoodList3)